<template>
    <div>
        <h1>Button 按钮</h1>
        <p>常用的操作按钮</p>
        <div>
            <h2>基础用法</h2>
            <p>使用 type、round 和 plain 来定义按钮的样式。</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-button>Default</mo-button>
                        <mo-button type="success" style="margin-left:10px">Success</mo-button>
                        <mo-button type="primary" style="margin-left:10px">Primary</mo-button>
                        <mo-button type="info" style="margin-left:10px">Info</mo-button>
                        <mo-button type="warning" style="margin-left:10px">Warning</mo-button>
                        <mo-button type="error" style="margin-left:10px">Error</mo-button>
                        <mo-button type="dark" style="margin-left:10px">Dark</mo-button>
                    </div>

                    <div class="flex-start" style="margin-top:20px">
                        <mo-button round>Default</mo-button>
                        <mo-button type="success" round style="margin-left:10px">Success</mo-button>
                        <mo-button type="primary" round style="margin-left:10px">Primary</mo-button>
                        <mo-button type="info" round style="margin-left:10px">Info</mo-button>
                        <mo-button type="warning" round style="margin-left:10px">Warning</mo-button>
                        <mo-button type="error" round style="margin-left:10px">Error</mo-button>
                        <mo-button type="dark" round style="margin-left:10px">Dark</mo-button>
                    </div>

                    <div class="flex-start" style="margin-top:20px">
                        <mo-button plain>Default</mo-button>
                        <mo-button type="success" plain style="margin-left:10px">Success</mo-button>
                        <mo-button type="primary" plain style="margin-left:10px">Primary</mo-button>
                        <mo-button type="info" plain style="margin-left:10px">Info</mo-button>
                        <mo-button type="warning" plain style="margin-left:10px">Warning</mo-button>
                        <mo-button type="error" plain style="margin-left:10px">Error</mo-button>
                        <mo-button type="dark" plain style="margin-left:10px">Dark</mo-button>
                    </div>
                </div>
                <div class="code-box" v-show="button1">
                    <pre v-highlight><code class="html">{{ code1 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button1=!button1">
                        {{button1?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

        <div>
            <h2>禁用状态</h2>
            <p>使用 disabled 属性来控制按钮是否为禁用状态。 该属性接受一个 Boolean 类型的值。</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-button disabled @click="test">Default</mo-button>
                        <mo-button type="success" disabled style="margin-left:10px">Success</mo-button>
                        <mo-button type="primary" disabled style="margin-left:10px">Primary</mo-button>
                        <mo-button type="info" disabled style="margin-left:10px">Info</mo-button>
                        <mo-button type="warning" disabled style="margin-left:10px">Warning</mo-button>
                        <mo-button type="error" disabled style="margin-left:10px">Error</mo-button>
                        <mo-button type="dark" disabled style="margin-left:10px">Dark</mo-button>
                    </div>
                </div>
                <div class="code-box" v-show="button2">
                    <pre v-highlight><code class="html">{{ code2 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button2=!button2">
                        {{button2?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

        <div>
            <h2>链接按钮</h2>
            <p>使用 link 属性来定义按钮的链接状态。 该属性接受一个 Boolean 类型的值。</p>
            <p>链接按钮是一种没有边框和背景色的按钮。</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-button link>Default</mo-button>
                        <mo-button type="success" link style="margin-left:10px">Success</mo-button>
                        <mo-button type="primary" link style="margin-left:10px">Primary</mo-button>
                        <mo-button type="info" link style="margin-left:10px">Info</mo-button>
                        <mo-button type="warning" link style="margin-left:10px">Warning</mo-button>
                        <mo-button type="error" link style="margin-left:10px">Error</mo-button>
                        <mo-button type="dark" link style="margin-left:10px">Dark</mo-button>
                    </div>
                </div>
                <div class="code-box" v-show="button3">
                    <pre v-highlight><code class="html">{{ code3 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button3=!button3">
                        {{button3?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

        <div>
            <h2>自定义颜色</h2>
            <p>使用 color 属性和 bgColor 来自定义按钮的文字颜色和背景颜色。 该属性接受一个 String 类型的Hex值。</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-button bgColor="#ebe129" color="#101010">Default</mo-button>
                        <mo-button bgColor="#e28fe9" plain style="margin-left:10px">Success</mo-button>
                        <mo-button bgColor="#e28fe9" round style="margin-left:10px">Success</mo-button>
                        <mo-button bgColor="#e28fe9" disabled style="margin-left:10px">Success</mo-button>
                        <mo-button color="#e28fe9" link style="margin-left:10px">Success</mo-button>
                    </div>
                </div>
                <div class="code-box" v-show="button4">
                    <pre v-highlight><code class="html">{{ code4 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button4=!button4">
                        {{button4?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

         <div>
            <h2>自定义大小</h2>
            <p>使用 size 属性来自定义按钮的大小。 该属性接受一个 String 类型的数值或者使用 large,medium,small 三种值。</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-button size="large">Default</mo-button>
                        <mo-button size="medium" style="margin-left:10px">Success</mo-button>
                        <mo-button size="small" style="margin-left:10px">Success</mo-button>
                        <mo-button size="15" style="margin-left:10px">Success</mo-button>
                    </div>
                </div>
                <div class="code-box" v-show="button5">
                    <pre v-highlight><code class="html">{{ code5 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button5=!button5">
                        {{button5?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

        <div>
            <h2>属性</h2>
             <el-table 
                :data="attrList" 
                style="width: 800px"
                :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
                    <el-table-column property="attr" label="属性"/>
                    <el-table-column property="desc" label="描述" />
                    <el-table-column property="type" label="类型"/>
                    <el-table-column property="opt" label="可选值" />
                    <el-table-column property="default" label="默认值"/>
             </el-table>
        </div>
    </div>
</template>

<script>
import { computed, reactive, ref, toRefs } from 'vue';
import code from '@/views/component/button/code';
import attrs from '@/views/component/button/attrs';
export default {
    name: 'button',
    components: {},
    props: {},
    emits: [],
    setup () 
    {
        let data = reactive({
            button1:false,
            button2:false,
            button3:false,
            button4:false,
            button5:false
        });
        function test ()
        {
            console.log(1212);
        }
        
        return {
            ...code,
            ...toRefs(data),
            ...attrs,
            test
        };
    }
};

</script>
<style lang='scss' scoped>

</style>
